const path = require('path');
const srcPath = path.join(__dirname, './', 'src')
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

require("babel-polyfill");

module.exports = {
    mode:"production",
    target: ['web', 'es5'],
    entry: './src/prod.js',
    // devtool: 'source-map',  // 代码调试
    output: {
        filename: 'xmind-min.js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        //功能已更新，与官网文档不同
        new CleanWebpackPlugin(),
        //入口文件名称管理
        new HtmlWebpackPlugin({
            title: 'webpack demo',
            template: path.join(srcPath, 'index.html'),
            filename: 'index.html'
        }),
        // 抽离 css 文件
        new MiniCssExtractPlugin({
            filename: 'xmind-style.css'
        }),
    ],
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            [
                                '@babel/preset-env',
                                {
                                    // 需要兼容到以下浏览器的什么版本
                                    "targets": {
                                        "ie": 7,
                                        "edge": "17",
                                        "firefox": "60",
                                        "chrome": "67",
                                        "safari": "11.1",
                                    },
                                    // 按需加载
                                    // "useBuiltIns": "usage",
                                    // 指定core-js版本 看好了这个地方如果和你安装的包的版本不一样会报错
                                    // "corejs": "3.8.3",
                                }
                            ]
                        ]
                    }
                }
            },
            //css配置 抽离 css
            {
                test: /\.css$/,
                use:[
                    MiniCssExtractPlugin.loader, 
                    "css-loader",
                    {
                        loader:'postcss-loader',
                        options:{
                            postcssOptions: {
                                plugins: [
                                    [ require('postcss-preset-env')() ],
                                ]
                            }
                        }
                    }
                ],
            },
            //图片和字体文件配置
            //安装了file-loader方可配置
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: ['file-loader']
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: [
                    'file-loader'
                ]
            },
            //xml文件配置
            //安装了csv-loader xml-loader方可配置
            {
                test: /\.(csv|tsv)$/,
                use: [
                    'csv-loader'
                ]
            },
            {
                test: /\.xml$/,
                use: [
                    'xml-loader'
                ]
            }
        ]
    }
};